﻿@{
    Uri url = new Uri(Request.Url.AbsoluteUri);
    ViewBag.Server = url.GetLeftPart(UriPartial.Authority);
}

<!DOCTYPE html>
<html>
<head>
    <title>Survey</title>

    <style>
        #instructions, ul.survey, #studentQuestions {
            width: 90%;
            margin-left: 5%;
        }

        table.surveytable {
            border: solid black;
        }

            table.surveytable th {
                padding: 8px;
                background-color: #3A3A3A;
                color: #ffffff;
            }

            table.surveytable tr:hover td {
                cursor: pointer;
            }

            table.surveytable tr:nth-child(even) td {
                background-color: #f0fcd2;
            }

            table.surveytable td {
                padding: 4px;
                background-color: #ffffff;
                text-align: center;
            }

                table.surveytable td.quest {
                    text-align: right;
                    font-weight: bold;
                    padding-right: 10px;
                    background-color: lightyellow;
                }

        ul.survey li.DONE > span {
            background: green;
            color: white !important;
        }

            ul.survey li.DONE > span:after {
                content: " DONE";
            }

        .hideme {
            display: none !important;
        }
    </style>

</head>
<body>
    <div id="staffform">
        <div id="instructions">
            <p>The following survey is divided by courses or dorms for which you are the PRIMARY "teacher". If you do not see a course or dorm here, then most likely you are not listed as the PRIMARY teacher. You should coordinate with your co-teacher or co-dorm parent or contact tech911.</p>
            <p>Click on the course or dorm, then click on the individual students to complete the survey for each student. Completed students show in GREEN. There is no SUBMIT button because your responses are recorded and saved automatically. You can change your responses until we close the survey at the end of the day on Wednesday.</p>
        </div>
        <ul id="surveycoursepanel" data-template="coursepanel-template"
                data-bind="source: courseListSource" class="survey"></ul>
        </div>
        <script type="text/x-kendo-tmpl" id="coursepanel-template">
            <li>
                <span data-bind="text: COURSENAME" />
                <div>
                    <ul id="#:COURSEID#" class="survey"></ul>
                </div>
            </li>
        </script>

        <script type="text/x-kendo-tmpl" id="student-list-template">
            <li id="#:STUDENTID##:COURSEID#LI" class="#:isdone#">
                <span>#:Student#</span>
                <div id="#:STUDENTID##:COURSEID#"></div>
            </li>
        </script>

        <div style="display:none">
            <div id="studentQuestions">
                <table class="surveytable">
                    <thead>
                        <tr>
                            <th class="quest">Criteria </th>
                            <th class="ans" colspan="2">Student meets or exceeds expextation</th>

                        </tr>
                    </thead>
                    <tbody id="#:STUDENTID#" data-role="listview" data-template="survey-template" data-bind="source: surveySource"></tbody>
                    @*
                                If you ever want an easy button to answer questions rapidly, uncomment this and the function at the bottom of this page.
                                <tfoot>
                            <tr>
                                <td></td>
                                <td><button id="allyes" type="button">All Yes</button></td>
                            </tr>
                        </tfoot>*@

                </table>

                <p>Data is updated as you answer questions. Completed students show in green.</p>
            </div>
        </div>


        <script type="text/x-kendo-tmpl" id="survey-template">
            <tr>
                <td class="quest">#:QuestionText#</td>
                <td class="ans">
                    <span> YES <input type="radio" name="#:QuestionID#" value="Yes" data-bind="checked: Answer" class="qradio" /></span>
                </td>
                <td class="ans">
                    <span>NO <input type="radio" name="#:QuestionID#" value="No" data-bind="checked: Answer" class="qradio" /></span>
                </td>

            </tr>
        </script>

        <script>
            // define the templates here, the code is above.
            var studentlisttemplate = kendo.template($("#student-list-template").html());
            var surveytemplate = kendo.template($("#survey-template").html());

            var surveyModel = kendo.observable({
                thiscourseID: "",
                thisstudentID: "",
                courseListSource:  //This is the data for the list of courses.
                    new kendo.data.DataSource({
                        requestEnd: function (e) {
                            setTimeout(function () {
                                $("#surveycoursepanel").kendoPanelBar({
                                    expandMode: "single",
                                    activate: function (e) {
                                        $('html, body').animate({
                                            scrollTop: $(e.item).offset().top - 100
                                        }, 10);
                                    },
                                    select: function (e) {
                                        if ($(e.item).is(".k-state-active")) {
                                            var that = this;
                                            window.setTimeout(function () { that.collapse($(e.item)); }, 1);
                                        } else {
                                            $('html, body').animate({
                                                scrollTop: $(e.item).offset().top - 100
                                            }, 100);
                                            surveyModel.set("thiscourseID", surveyModel.courseListSource.at($(e.item).index()).COURSEID);
                                            surveyModel.studentListSource.transport.options.read.url = crudServiceBaseUrl + "sqlsp/SP_SimpleSchedules_StudentList?CourseID=" + surveyModel.get("thiscourseID");
                                            surveyModel.studentListSource.read();
                                        }

                                    }
                                });
                            });
                        },
                        transport: {
                            read: {
                                url: "",
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id: "CourseID"
                            }
                        }
                    }),
                studentListSource:  // This list of students in a particular COURSE - updated when data is selected above.
                    new kendo.data.DataSource({
                        requestEnd: function (e) {
                            setTimeout(function () {
                                $("#" + surveyModel.get("thiscourseID")).html(kendo.render(studentlisttemplate, surveyModel.studentListSource.view()));
                                $("#" + surveyModel.get("thiscourseID")).kendoPanelBar({
                                    expandMode: "single",
                                    activate: function (e) {
                                        $('html, body').animate({
                                            scrollTop: $(e.item).offset().top - 100
                                        }, 10);
                                    },
                                    select: function (e) {
                                        if ($(e.item).is(".k-state-active")) {
                                            var that = this;
                                            window.setTimeout(function () { that.collapse($(e.item)); }, 1);
                                        } else {
                                            $('html, body').animate({
                                                scrollTop: $(e.item).offset().top - 100
                                            }, 100);
                                            surveyModel.set("thisstudentID", surveyModel.studentListSource.at($(e.item).index()).STUDENTID);
                                            surveyModel.surveySource.transport.options.read.url = crudServiceBaseUrl + "sqlsp/SP_SurveyData?StudentID=" + surveyModel.get("thisstudentID") + "&CourseID=" + surveyModel.get("thiscourseID");
                                            surveyModel.surveySource.read();
                                        }

                                    }
                                })
                            });
                        },
                        transport: {
                            read: {
                                url: "",
                                dataType: "json"
                            }
                        }
                    }),
                surveySource:
                    new kendo.data.DataSource({
                        requestEnd: function (e) {
                            setTimeout(function () {
                                $("#studentQuestions").appendTo($("#" + surveyModel.get("thisstudentID") + surveyModel.get("thiscourseID")));
                            });
                        }, transport: {
                            read: {
                                url: crudServiceBaseUrl + "sqlsp/SP_SurveyData?StudentID=0",
                                // get blank data first time through
                                dataType: "json"
                            },
                            update: {
                                url: crudServiceBaseUrl + "alltables/SurveyData",
                                dataType: "json",
                                type: "put"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "alltables/SurveyData/Destroy",
                                dataType: "json"
                            },
                            create: {
                                url: crudServiceBaseUrl + "alltables/SurveyData/Create",
                                dataType: "json"
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return { models: kendo.stringify(options.models) };
                                }
                            }
                               
                        },
                        batch: true,
                        schema: {
                            model: {
                                id: "QuestionID"

                            }
                        },
                        error: function (e) {
                            
                            alert("There appears to be a network error.\nCheck your connection and then click OK to try again.\n\nIf you keep getting this error, then there is a problem between you and the server.\nIn such a case, you may have to refresh the entire page and you may lose a small amount of your recent work.\n\nIf you KEEP having problems, email portalhelp@rva.org"); // displays "Invalid query"
                                surveyModel.surveySource.sync();
                            },

                        change: function (e) {
                            if (surveyModel.surveySource.hasChanges())
                                surveyModel.surveySource.sync();
                            surveyModel.set("view", this.view());
                            var data = this.data();
                            var done = true;
                            for (var i = 0; i < data.length; i++) {
                                if (data[i].Answer == null)
                                    done = false;
                            }
                            if (done) {
                                $("#" + surveyModel.get("thisstudentID") + surveyModel.get("thiscourseID") + "LI").addClass("DONE");
                            }
                        }
                    })
            });

            //This gets the list of courses for the current user - so this will only be meaningful for staff. That is the starting point for this entire system.
            surveyModel.courseListSource.transport.options.read.url = crudServiceBaseUrl + "sqlsp/SP_SimpleSchedules?StaffID=" + viewModel.userID;
            kendo.bind(document.body, surveyModel);

            // If you ever want an easy button to set values for all answers, uncomment this code and the button in the template.
            //
            //$("#allyes").kendoButton({
            //    click: function (e) {
            //        var tempdata = surveyModel.surveySource.data();
            //        for (var i = 0; i < tempdata.length; i++) {
            //           surveyModel.surveySource.data()[i].Answer="Yes";
            //         surveyModel.surveySource.data()[i].dirty = true;
            //        }
            //        surveyModel.surveySource.sync();
            //    }
            //});
        </script>
</body>



</html>